<form id="<?php echo $uniqid;?>" method="post">
    <div id="goodsedit" class="easyui-tabs">
        <div title="基本信息" style="padding:0;height:600px;">
            <table width="100%" cellspacing="1" cellpadding="5" class="formtable">
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">商品形式：</td>
                    <td>
                        <div style="display: flex;padding-top: 10px">
                            <div class="goods-type" :class="params.type=='normal' ? 'seleted' : ''">
                                <img style="width: 160px;height: 56px;box-sizing: border-box;" src="/images/entity.png" @click="changeType('normal')">
                                <div class="goods-type-selected" style="display: block;" v-if="params.type=='normal'">
                                    <img class="label-auto" src="/static/Easyui/themes/2019/icons/selected.png">
                                </div>
                            </div>
                            <div class="goods-type" :class="params.type=='virtual' ? 'seleted' : ''">
                                <img style="width: 160px;height: 56px;box-sizing: border-box;" src="/images/virtual.png" @click="changeType('virtual')">
                                <div class="goods-type-selected" style="display: block;" v-if="params.type=='virtual'">
                                    <img class="label-auto" src="/static/Easyui/themes/2019/icons/selected.png">
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">商品标题：</td>
                    <td><input type="text" style="width:400px;" v-model="params.title"
                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                               placeholder="请输入标题." required="true"></td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">副标题：</td>
                    <td><input type="text" style="width:400px;" v-model="params.subtitle"
                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                               placeholder=""></td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">商品分类:</td>
                    <td>
                        <select class="item-cat forminput inputstyle" style="width:400px;"></select>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">状态：</td>
                    <td>
                        <div class="display-flex">
                            <el-radio-group v-model="params.status">
                                <el-radio label="up">上架</el-radio>
                                <el-radio label="down">下架</el-radio>
                            </el-radio-group>
                        </div>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">自动上下架：</td>
                    <td>
                        <div class="display-flex">
                            <el-radio-group v-model="params.autoshow">
                                <el-radio :label="1">启用</el-radio>
                                <el-radio :label="0">禁用</el-radio>
                            </el-radio-group>
                        </div>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.autoshow">
                    <td class="tlabel">自动上架时间：</td>
                    <td>
                        <div class="display-flex">
                            <el-date-picker v-if="params.autoshow_start_text != 'notend'" size="small" v-model="params.autoshow_start_text" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="自动上架时间" default-time="00:00:00">
                            </el-date-picker>
                            <div style="margin-left: 20px;" v-if="params.autoshow_start_text != 'notend'"></div>
                            <el-checkbox v-model="autoshow_start_notend" @change="autoshowStartNotend">不自动上架</el-checkbox>
                        </div>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.autoshow">
                    <td class="tlabel">自动下架时间：</td>
                    <td>
                        <div class="display-flex">
                            <el-date-picker v-if="params.autoshow_end_text != 'notend'" size="small" v-model="params.autoshow_end_text" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="自动下架时间" default-time="23:59:59">
                            </el-date-picker>
                            <div style="margin-left: 20px;" v-if="params.autoshow_end_text != 'notend'"></div>
                            <el-checkbox v-model="autoshow_end_notend" @change="autoshowEndNotend">不自动下架</el-checkbox>
                        </div>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="!params.enable_quanyi">
                    <td class="tlabel">是否可用兑换券结算</td>
                    <td>
                        <div class="display-flex">
                            <el-radio-group v-model="params.enable_hongbao">
                                <el-radio :label="1">可用</el-radio>
                                <el-radio :label="0">不可用</el-radio>
                            </el-radio-group>
                        </div>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="!params.enable_hongbao">
                    <td class="tlabel">是否可用消费补贴结算</td>
                    <td>
                        <div class="display-flex">
                            <el-radio-group v-model="params.enable_quanyi">
                                <el-radio :label="1">可用</el-radio>
                                <el-radio :label="0">不可用</el-radio>
                            </el-radio-group>
                        </div>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">参与业绩计算</td>
                    <td>
                        <div class="display-flex">
                            <el-radio-group v-model="params.calc_consume">
                                <el-radio :label="1">参与</el-radio>
                                <el-radio :label="0">不参与</el-radio>
                            </el-radio-group>
                        </div>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">排序：</td>
                    <td><input type="number" size="20"
                                              class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                              v-model="params.weigh"/></td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">商品主图:</td>
                    <td>
                        <div title="上传图片" class="col-md-12 display-flex">
                            <div class="img-box" v-if="params.image">
                                <a class="linkWrapper" target="_blank" :href="params.image" title="查看原图">
                                    <img height="70px" :src="params.image+'?imageView2/1/w/100/h/100'"></a>
                                <div class="img-box-del" @click="params.image=''">
                                    <img class="label-auto" src="/static/Easyui/themes/2019/icons/del_tr.gif">
                                </div>
                            </div>
                            <div class="add-image-button" v-else>
                                <a class="btn btn-default btn-lg" @click="uploadBox('goodseditVm.params.image')" href="javascript:void(0);">
                                    <i class="iconfont icon-tianjia"></i>
                                </a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">轮播图:</td>
                    <td colspan="5">
                        <div class="display-flex">
                            <div class="img-box" v-if="images_arr.length>0" v-for="(vo,index) in images_arr">
                                <a class="linkWrapper" target="_blank" :href="vo" title="查看原图">
                                    <img height="70px" :src="vo+'?imageView2/1/w/100/h/100'"></a>
                                <div class="img-box-del" @click="deleteImages(index)">
                                    <img class="label-auto" src="/static/Easyui/themes/2019/icons/del_tr.gif">
                                </div>
                            </div>
                            <div class="add-image-button">
                                <a class="btn btn-default btn-lg" @click="uploadBox('goodseditVm.images_arr')" href="javascript:void(0);">
                                    <i class="iconfont icon-tianjia"></i>
                                </a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">虚拟销量：</td>
                    <td><input type="number" size="20"
                                            class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                            v-model="params.sales"/></td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">浏览人数：</td>
                    <td><input type="number" size="20"
                                                        class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                                        v-model="params.views"/></td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.type=='normal'">
                    <td class="tlabel">配送方式：</td>
                    <td>
                        <label style="margin-right: 20px;">
                            <input type="checkbox" v-model="dispatch_type" class="textbox-prompt"
                                   value="express"/>物流快递</label>
                        <label style="margin-right: 20px;">
                            <input type="checkbox" v-model="dispatch_type" class="textbox-prompt"
                                   value="selfetch"/>到店/自提</label>
                        <label style="margin-right: 20px;">
                            <input type="checkbox" v-model="dispatch_type" class="textbox-prompt"
                                   value="store"/>商家配送</label>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.type=='virtual'">
                    <td class="tlabel">商品类型：</td>
                    <td>
                        <label style="margin-right: 20px;">
                            <input type="checkbox" class="textbox-prompt"
                                   v-model="dispatch_type" value="selfetch"/>到店核销</label>
                        <label style="margin-right: 20px;">
                            <input type="checkbox" class="textbox-prompt"
                                   v-model="dispatch_type" value="autosend"/>自动发货</label>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.type=='normal' && dispatch_type.indexOf('express')>-1">
                    <td class="tlabel">物流快递：</td>
                    <td>
                        <select id="goodsExpressVal" class="forminput inputstyle textbox-text validatebox-text">
                            <template v-for="(vo,index) in expressTemp">
                                <option v-if="dispatch_ids.indexOf(vo.id.toString())>-1" selected :value="vo.id">{{vo.name}}</option>
                                <option v-else :value="vo.id">{{vo.name}}</option>
                            </template>
                        </select>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="dispatch_type.indexOf('selfetch')>-1">
                    <td class="tlabel">到店自提：</td>
                    <td>
                        <select id="goodsSelfetchVal" class="forminput inputstyle textbox-text validatebox-text">
                            <template v-for="(vo,index) in selfetchTemp">
                                <option v-if="dispatch_ids.indexOf(vo.id.toString())>-1" selected :value="vo.id">{{vo.name}}</option>
                                <option v-else :value="vo.id">{{vo.name}}</option>
                            </template>
                        </select>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.type=='normal' && dispatch_type.indexOf('store')>-1">
                    <td class="tlabel">商家配送：</td>
                    <td>
                        <select id="goodsStoreVal" class="forminput inputstyle textbox-text validatebox-text">
                            <template v-for="(vo,index) in storeTemp">
                                <option v-if="dispatch_ids.indexOf(vo.id.toString())>-1" selected :value="vo.id">{{vo.name}}</option>
                                <option v-else :value="vo.id">{{vo.name}}</option>
                            </template>
                        </select>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.type=='virtual' && dispatch_type.indexOf('autosend')>-1">
                    <td class="tlabel">自动发货：</td>
                    <td>
                        <select id="goodsAutosendVal" class="forminput inputstyle textbox-text validatebox-text">
                            <template v-for="(vo,index) in autosendTemp">
                                <option v-if="dispatch_ids.indexOf(vo.id.toString())>-1" selected :value="vo.id">{{vo.name}}</option>
                                <option v-else :value="vo.id">{{vo.name}}</option>
                            </template>
                        </select>
                    </td>
                </tr>
            </table>
            <div style="padding-bottom: 100px;"></div>
        </div>
        <div title="规格价格" style="padding:0px;display:none;height:600px;">
            <table width="100%" cellspacing="1" cellpadding="5" class="formtable">
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">商品规格：</td>
                    <td>
                        <label v-if="!params.id || params.is_sku===0" style="padding-left: 20px;"><input name="gender" type="radio"
                                                                  class="textbox-prompt"  v-model="params.is_sku"
                                                                  value="0" >单规格</label>
                        <label v-if="!params.id || params.is_sku===1" style="padding-left: 20px;"><input name="gender" type="radio"
                                                                  class="textbox-prompt"  v-model="params.is_sku"
                                                                  value="1" >多规格</label>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">售卖价格：</td>
                    <td><input type="text" style="width:400px;" v-model="params.price"
                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                               placeholder="请输入售卖价格." required="true"> 元</td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">市场价格：</td>
                    <td><input type="text" style="width:400px;" v-model="params.original_price"
                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                               placeholder="请输入市场价格"> 元</td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.is_sku==0">
                    <td class="tlabel">成本价格：</td>
                    <td><input type="text" style="width:400px;" v-model="params.cost_price"
                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                               placeholder="请输入市场价格"> 元</td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.is_sku==0">
                    <td class="tlabel">商品库存：</td>
                    <td><input type="text" style="width:400px;" v-model="skuPrice[0].stock"
                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                               placeholder=""></td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.is_sku==0">
                    <td class="tlabel">库存预警：</td>
                    <td><input type="text" style="width:400px;" v-model="skuPrice[0].stock_warning"
                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                               placeholder=""></td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.is_sku==0">
                    <td class="tlabel">可获积分：</td>
                    <td><input type="text" style="width:400px;" v-model="skuPrice[0].score"
                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                               placeholder=""></td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.is_sku==0">
                    <td class="tlabel">商品重量：</td>
                    <td><input type="text" style="width:400px;" v-model="skuPrice[0].weight"
                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                               placeholder=""></td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.is_sku==0">
                    <td class="tlabel">商品编号：</td>
                    <td><input type="text" style="width:400px;" v-model="skuPrice[0].sn"
                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                               placeholder=""></td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.is_sku==1">
                    <td class="tlabel">规格列表：</td>
                    <td>
                        <div class="" v-for="(s, k) in skuList" style="width: 80%;">
                            <div class="display-flex sku-item" style="justify-content: space-between;background-color: #F5F5F5;">
                                <div class="display-flex">
                                    <div style="padding:0 20px;">规格名称：</div>
                                    <div style="width: 120px;">
                                        <input type="input" v-model="skuList[k]['name']" maxlength="50"
                                               class="forminput inputstyle skuinput"   placeholder="请输入名称">
                                        </input>
                                    </div>
                                </div>

                                <div style="width: 20px;height: 20px;" @click="deleteMainSku(k)">
                                    <img class="label-auto" src="/static/Easyui/themes/2019/icons/del_tr.gif">
                                </div>
                            </div>
                            <div class="display-flex sku-item sku-item-level"
                                 style="background: #fff;padding: 10px 20px;">
                                <div style="width: 60px;">规格值：</div>
                                <div class="display-flex sku-item sku-item-level2">
                                    <div class="sku-children" v-for="(sc, c) in s.children">
                                        <input type="input" v-model="skuList[k]['children'][c]['name']"
                                               class="forminput inputstyle skuinput"    size="small" placeholder="请输入规格值" maxlength="22">
                                        </input>
                                        <div class="display-flex sku-children-del" @click="deleteChildrenSku(k,c)">
                                            <img class="label-auto" src="/static/Easyui/themes/2019/icons/del_tr.gif">
                                        </div>
                                    </div>
                                    <span style="color: #7536D0;cursor: pointer;width: 50px; text-align: center;"
                                          @click="addChildrenSku(k)">添加</span>
                                </div>

                            </div>
                        </div>
                        <span class="l-btn l-btn-small color9 table" @click="addMainSku"><span class="l-btn-text">添加规格</span></span>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF" v-if="params.is_sku==1 && skuPrice.length && skuList.length">
                    <td colspan="2" style="padding: 0;">
                        <table width="100%">
                            <thead>
                            <tr style="text-align: center">
                                <template v-for="(item, i) in skuList" :key="i">
                                    <td v-if="item.children.length">
                                        {{item.name}}
                                    </td>
                                </template>
                                <td width="40px">图片</td>
                                <td>价格<div>
                                        <input v-enter-number class="forminput inputstyle skuinput" v-model="itemPrice">
                                        <span style="color: #7536D0;cursor: pointer;width: 50px; text-align: center;" @click="batchSet(itemPrice, 'price')">赋值</span>
                                    </div></td>
                                <td>成本价<div>
                                    <input v-enter-number class="forminput inputstyle skuinput" v-model="itemCostPrice">
                                    <span style="color: #7536D0;cursor: pointer;width: 50px; text-align: center;" @click="batchSet(itemCostPrice, 'cost_price')">赋值</span>
                                </div></td>
                                <td>库存<div>
                                    <input v-enter-number class="forminput inputstyle skuinput" v-model="itemStock">
                                    <span style="color: #7536D0;cursor: pointer;width: 50px; text-align: center;" @click="batchSet(itemStock, 'stock')">赋值</span>
                                </div></td>
                                <td>库存报警<div>
                                    <input v-enter-number class="forminput inputstyle skuinput" v-model="itemStockWarning">
                                    <span style="color: #7536D0;cursor: pointer;width: 50px; text-align: center;" @click="batchSet(itemStockWarning, 'stock_warning')">赋值</span>
                                </div></td>
                                <td>重量<div>
                                    <input v-enter-number class="forminput inputstyle skuinput" v-model="itemWeight">
                                    <span style="color: #7536D0;cursor: pointer;width: 50px; text-align: center;" @click="batchSet(itemWeight, 'weight')">赋值</span>
                                </div></td>
                                <td>可获积分<div>
                                    <input v-enter-number class="forminput inputstyle skuinput" v-model="itemScore">
                                    <span style="color: #7536D0;cursor: pointer;width: 50px; text-align: center;" @click="batchSet(itemScore, 'score')">赋值</span>
                                </div></td>
                                <td>编码</td>
                                <td width="80px">状态
                                    <div>
                                        <span style="color: #7536D0;cursor: pointer;width: 50px; text-align: center;" @click="batchStatus('up')">批量上架</span><br>
                                        <span style="color: #7536D0;cursor: pointer;width: 50px; text-align: center;" @click="batchStatus('down')">批量下架</span>
                                    </div></td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, i) in skuPrice" :key="i">
                                <td v-for="(v, j) in item.goods_sku_text" :key="j">
                                    <span class="th-center">{{v}}</span>
                                </td>
                                <td style="padding: 5px;">
                                    <div class="display-flex table-upload-img" style="margin: 0;">
                                        <div class="img-box" style="width: 30px;padding: 5px;margin-right: 0;" v-if="item.image">
                                            <a class="linkWrapper" target="_blank" :href="item.image" title="查看原图">
                                                <img height="40px" :src="item.image+'?imageView2/1/w/100/h/100'"></a>
                                            <div class="img-box-del" @click="item.image=''">
                                                <img class="label-auto" src="/static/Easyui/themes/2019/icons/del_tr.gif">
                                            </div>
                                        </div>
                                        <div v-else class="add-image-button">
                                            <a class="btn btn-default btn-lg" style="padding:0 15px" @click="uploadBox('goodseditVm.skuPrice['+i+'].image')" href="javascript:void(0);">
                                                <i class="iconfont icon-tianjia"></i>
                                            </a>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <input v-enter-number class="forminput inputstyle skuinput" v-model="item.price"></input>
                                </td>
                                <td>
                                    <input class="forminput inputstyle skuinput" v-model="item.cost_price"></input>
                                </td>
                                <td>
                                    <input class="forminput inputstyle skuinput" type="number" min="0" v-model="item.stock">
                                    </input>
                                </td>
                                <td>
                                    <div class="display-flex">
                                        <input type="number" min="0" class="forminput inputstyle skuinput"
                                                  v-model="item.stock_warning">
                                        </input>
                                    </div>
                                </td>
                                <td>
                                    <input class="forminput inputstyle skuinput" v-model="item.weight"></input>
                                </td>
                                <td>
                                    <input class="forminput inputstyle skuinput" v-model="item.score"></input>
                                </td>
                                <td>
                                    <input class="forminput inputstyle skuinput" v-model="item.sn"></input>
                                </td>
                                <td align="center">
                                    <span class="sku-status th-center pointer" :style="item.status==='up' ? 'color:green':'color:red'" @click="editStatus(i)">
                                        {{ item.status === 'up' ? '已上架' : '已下架' }}
                                    </span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </table>
            <div style="padding: 25px;"></div>
        </div>
        <div title="商品详情" style="padding:0px;display:none;height:600px;">
            <table width="100%" cellspacing="1" cellpadding="5" class="formtable">
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">服务标签：</td>
                    <td>
                        <label v-for="(vo,index) in goodsService">
                            <input name="goodsService" type="checkbox" class="textbox-prompt" v-model="service_ids" :value="vo.id">{{ vo.name }}
                        </label>

                        <span class="l-btn l-btn-small color9 table" @click="addService"><span class="l-btn-text">添加标签</span></span>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td class="tlabel">参数详情：</td>
                    <td>
                        <div class="" v-for="(s, k) in parameters" style="width: 80%;">
                            <div class="display-flex sku-item" style="justify-content: space-between;background-color: #F5F5F5;">
                                <div class="display-flex">
                                    <div style="padding:0 20px;">
                                        <input type="text" style="width:200px;" v-model="s.key"
                                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                               placeholder="请输入参数名称." required="true">
                                    </div>
                                    <div style="width: 120px;">
                                        <input type="text" style="width:500px;" v-model="s.val"
                                               class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                                               placeholder="请输入参数详情." required="true">
                                    </div>
                                </div>
                                <div style="width: 20px;height: 20px;" @click="delParams(k)">
                                    <img class="label-auto" src="/static/Easyui/themes/2019/icons/del_tr.gif">
                                </div>
                            </div>
                        </div>
                        <span class="l-btn l-btn-small color9 table" @click="addParams"><span class="l-btn-text">添加参数</span></span>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td colspan="2">
                        <script id="goodsEditor" type="text/plain">{{ params.content }}</script>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div style="position:absolute;z-index: 9999; bottom:0;width:100%; text-align:right; background-color:#F1f1f1; border:#ccc 1px solid;">
        <div style="padding:2px 15px 2px 10px; float:right;">
            <a v-if="step<2" class="l-btn l-btn-small" href="javascript:void(0);" @click="nextStep"><span
                        class="l-btn-left l-btn-icon-left"><span class="l-btn-text">下一步</span><span
                        class="l-btn-icon icon-ok">&nbsp;</span></span></a>
            <a v-else href="javascript:void(0);" class="l-btn l-btn-small" @click="goodseditsubmitForm()"><span
                    class="l-btn-left l-btn-icon-left"><span class="l-btn-text">确定</span><span
                    class="l-btn-icon icon-ok">&nbsp;</span></span></a>
            <a href="javascript:void(0);" class="l-btn l-btn-small" @click="goodseditclearForm()"><span
                    class="l-btn-left l-btn-icon-left"><span class="l-btn-text">关闭</span><span
                    class="l-btn-icon icon-no">&nbsp;</span></span></a>
        </div>
    </div>
</form>
<script>
    var goodseditVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            step: 0,
            itemPrice: '',
            itemCostPrice: '',
            itemStock: '',
            itemStockWarning: '',
            itemWeight: '',
            itemScore: '',
            type: 'edit',
            dispatch_type: [],
            dispatch_ids: [],
            service_ids: [],
            parameters: [],
            params: JSON.parse('<?php echo addslashes($dataset);?>'),
            expressTemp: JSON.parse('<?php echo addslashes($expressTemp);?>'),
            storeTemp: JSON.parse('<?php echo addslashes($storeTemp);?>'),
            selfetchTemp: JSON.parse('<?php echo addslashes($selfetchTemp);?>'),
            autosendTemp: JSON.parse('<?php echo addslashes($autosendTemp);?>'),
            categoryTree: JSON.parse('<?php echo $categoryTree;?>'),
            skuList: JSON.parse('<?php echo addslashes($skuList);?>'),
            skuPrice: JSON.parse('<?php echo addslashes($skuPrice);?>'),
            goodsService: JSON.parse('<?php echo addslashes($goodsService);?>'),
            skuModal: '',
            childrenModal: [],
            images_arr: [],
            countId: 1,
            allEditSkuName: '',
            isEditInit: false, // 编辑时候初始化是否完成
            isResetSku: 0,
            autoshow_start_notend: false,
            autoshow_end_notend: false,
        },
        mounted() {
            this.init();
        },
        watch: {
            skuList: {
                handler(newName, oldName) {
                    if (this.isEditInit) { // 编辑初始化的时候会修改 skuList 但这时候不触发更新
                        this.buildSkuPriceTable();
                    }
                },
                deep: true
            }
        },
        methods: {
            batchSet(itemPrice, itemCol){
                goodseditVm.skuPrice.forEach((it)=>{
                    it[itemCol] = itemPrice;
                });
            },
            batchStatus(mode){
                goodseditVm.skuPrice.forEach((it)=>{
                    it.status = mode;
                });
            },
            init(){
                $('#<?php echo $uniqid;?> .item-cat').combotree({
                    data: this.categoryTree,
                    panelHeight: 300,
                    checkbox: true
                });
                if (parseInt(this.params.category_ids)>0) {
                    $('#<?php echo $uniqid;?> .item-cat').combotree('setValues', this.params.category_ids.split(','));
                }
                this.images_arr = this.params.images ? this.params.images : [];
                if(this.params.is_sku) {
                    this.initSku(this.skuList, this.skuPrice);
                }
                if(!this.params.id){
                    this.isEditInit = true;
                }
                this.parameters = this.params.params ? this.params.params : [];
                this.dispatch_type = this.params.dispatch_type ? this.params.dispatch_type.split(',') : [];
                this.dispatch_ids = this.params.dispatch_ids ? this.params.dispatch_ids.split(',') : [];
                this.service_ids = this.params.service_ids ? this.params.service_ids.split(',') : [];
                if(this.params.autoshow){
                    if(this.params.autoshow_end_text == 'notend'){
                        this.autoshow_end_notend = true;
                    }
                    if(this.params.autoshow_start_text == 'notend'){
                        this.autoshow_start_notend = true;
                    }
                }
            },
            deleteImages(index){
                this.images_arr.splice(index, 1);
            },
            autoshowStartNotend(val){
                if (val) {
                    this.params.autoshow_start_text = 'notend';
                } else {
                    this.params.autoshow_start_text = this.getNowTime(0);
                }
            },
            autoshowEndNotend(val){
                if (val) {
                    this.params.autoshow_end_text = 'notend';
                } else {
                    this.params.autoshow_end_text = this.getNowTime(1);
                }
            },
            getNowTime(type) {
                let now = new Date();
                let year = now.getFullYear(); //得到年份
                let month = now.getMonth()+1; //得到月份
                let date = now.getDate()+1; //得到明天日期
                let hour =" 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，如若不需要，此行可忽略
                if(type === 1){
                    hour =" 23:59:59";
                }
                month = month.toString().padStart(2, "0");//月份补0
                date = date.toString().padStart(2, "0");//日期补0
                return `${year}-${month}-${date}${hour}`;
            },
            //添加子规格
            addChildrenSku(k) {
                // if (this.childrenModal[k] !== '') {
                // 检测当前子规格是否已经被添加过了
                let isExist = false
                this.skuList[k].children.forEach(e => {
                    if (e.name === this.childrenModal[k] && e.name !== "") {
                        isExist = true
                    }
                })

                if (isExist) {
                    $.messager.alert('子规格已存在');
                    return false;
                }

                this.skuList[k].children.push({
                    id: 0,
                    temp_id: this.countId++,
                    name: this.childrenModal[k],
                    pid: this.skuList[k].id,
                })

                this.childrenModal[k] = '';

                // 如果是添加的第一个子规格，清空 skuPrice
                if (this.skuList[k].children.length === 1) {
                    this.skuPrice = [] // 规格大变化，清空skuPrice
                    this.isResetSku = 1; // 重置规格
                }

                this.buildSkuPriceTable()
                // }
            },
            //添加主规格
            addMainSku() {
                // if (this.skuModal !== '') {
                this.skuList.push({
                    id: 0,
                    temp_id: this.countId++,
                    name: this.skuModal,
                    pid: 0,
                    children: []
                })
                this.skuModal = '';
                // this.skuPrice = []       // 新添加的主规格不清空 skuPrice,当添加主规格第一个子规格的时候清空
                this.buildSkuPriceTable()
                // }
            },
            addService() {
                addTab('服务标签', '/admin/goodsservice/index');
            },
            //添加参数
            addParams(){
                this.parameters.push({key:'', val:''});
            },
            delParams(idx){
                this.parameters.splice(idx, 1);
            },
            //删除主规格
            deleteMainSku(k) {
                let data = this.skuList[k]

                // 删除主规格
                this.skuList.splice(k, 1)

                // 如果当前删除的主规格存在子规格，则清空 skuPrice， 不存在子规格则不清空
                if (data.children.length > 0) {
                    this.skuPrice = [] // 规格大变化，清空skuPrice
                    this.isResetSku = 1; // 重置规格
                }

                this.buildSkuPriceTable()
            },
            //删除子规格
            deleteChildrenSku(k, i) {
                let data = this.skuList[k].children[i]
                this.skuList[k].children.splice(i, 1)

                // 查询 skuPrice 中包含被删除的的子规格的项，然后移除
                let deleteArr = []
                this.skuPrice.forEach((item, index) => {
                    item.goods_sku_text.forEach((e, i) => {
                        if (e === data.name) {
                            deleteArr.push(index)
                        }
                    })
                })
                deleteArr.sort(function (a, b) {
                    return b - a;
                })
                // 移除有相关子规格的项
                deleteArr.forEach((i, e) => {
                    this.skuPrice.splice(i, 1)
                })

                // 当前规格项，所有子规格都被删除，清空 skuPrice
                if (this.skuList[k].children.length <= 0) {
                    this.skuPrice = [] // 规格大变化，清空skuPrice
                    this.isResetSku = 1; // 重置规格
                }
                this.buildSkuPriceTable()
            },
            //修改上下架状态
            editStatus(i) {
                this.skuPrice[i].status = (this.skuPrice[i].status === 'up') ? 'down' : 'up';
            },
            //组合新的规格价格库存重量编码图片
            buildSkuPriceTable() {
                let arr = [];
                //遍历sku子规格生成新数组，然后执行递归笛卡尔积
                this.skuList.forEach((s1, k1) => {
                    let children = s1.children;
                    let childrenIdArray = [];
                    if (children.length > 0) {
                        children.forEach((s2, k2) => {
                            childrenIdArray.push(s2.temp_id);
                        })

                        // 如果 children 子规格数量为 0,则不渲染当前规格, （相当于没有这个主规格）
                        arr.push(childrenIdArray);
                    }
                })

                this.recursionSku(arr, 0, []);
            },
            //递归找笛卡尔规格集合
            recursionSku(arr, k, temp) {
                if (k == arr.length && k != 0) {
                    let tempDetail = []
                    let tempDetailIds = []

                    temp.forEach((item, index) => {
                        for (let sku of this.skuList) {
                            for (let child of sku.children) {
                                if (item == child.temp_id) {
                                    tempDetail.push(child.name)
                                    tempDetailIds.push(child.temp_id)
                                }
                            }
                        }
                    })

                    let flag = false // 默认添加新的
                    for (let i = 0; i < this.skuPrice.length; i++) {
                        if (this.skuPrice[i].goods_sku_temp_ids.join(',') == tempDetailIds.join(',')) {
                            flag = i
                            break;
                        }
                    }

                    if (flag === false) {
                        this.skuPrice.push({
                            id: 0,
                            temp_id: this.skuPrice.length + 1,
                            goods_sku_ids: '',
                            goods_id: 0,
                            weigh: 0,
                            image: '',
                            stock: 0,
                            stock_warning: 0,
                            stock_warning_switch: false,
                            price: 0,
                            cost_price: 0,
                            sn: '',
                            weight: 0,
                            score: 0,
                            status: 'up',
                            goods_sku_text: tempDetail,
                            goods_sku_temp_ids: tempDetailIds,
                        });
                    } else {
                        this.skuPrice[flag].goods_sku_text = tempDetail
                        this.skuPrice[flag].goods_sku_temp_ids = tempDetailIds
                    }
                    return;
                }
                if (arr.length) {
                    for (let i = 0; i < arr[k].length; i++) {
                        temp[k] = arr[k][i]
                        this.recursionSku(arr, k + 1, temp)
                    }
                }
            },
            initSku(skuList, skuPrice) {
                // 记录每个规格项真实 id，对应的临时 id
                let tempIdArr = {};
                for (let i in skuList) {
                    // 为每个 规格增加当前页面自增计数器，比较唯一用
                    skuList[i]['temp_id'] = this.countId++
                    for (let j in skuList[i]['children']) {
                        // 为每个 规格项增加当前页面自增计数器，比较唯一用
                        skuList[i]['children'][j]['temp_id'] = this.countId++

                        // 记录规格项真实 id 对应的 临时 id
                        tempIdArr[skuList[i]['children'][j]['id']] = skuList[i]['children'][j]['temp_id']
                    }
                }
                // for (let i in skuPrice) {
                for (var i = 0; i < skuPrice.length; i++) {
                    let tempSkuPrice = skuPrice[i]
                    tempSkuPrice['temp_id'] = i + 1

                    // 将真实 id 数组，循环，找到对应的临时 id 组合成数组
                    tempSkuPrice['goods_sku_temp_ids'] = [];
                    let goods_sku_id_arr = tempSkuPrice['goods_sku_ids'].split(',');
                    for (let ids of goods_sku_id_arr) {
                        tempSkuPrice['goods_sku_temp_ids'].push(tempIdArr[ids])
                    }

                    skuPrice[i] = tempSkuPrice
                }
                if (this.type === 'copy') {
                    for (let i in skuList) {
                        // 为每个 规格增加当前页面自增计数器，比较唯一用
                        skuList[i].id = 0;
                        for (let j in skuList[i]['children']) {
                            skuList[i]['children'][j].id = 0;
                        }
                    }
                }
                if (skuPrice.length > 0) {
                    skuPrice.forEach(si => {
                        si.stock_warning_switch = false
                        if (si.stock_warning || si.stock_warning == 0) {
                            si.stock_warning_switch = true
                        }
                    })
                }
                this.skuList = skuList;
                this.skuPrice = skuPrice;

                setTimeout(() => {
                    // 延迟触发更新下面列表
                    this.isEditInit = true;
                }, 200)
            },
            changeType(goodsType){
                this.params.type = goodsType;
            },
            nextStep(){
                ++this.step;
                $('#goodsedit').tabs('select', this.step);
            },
            goodseditclearForm () {
                $('#goodseditfm').form('clear');
                $('#rightTabs').tabs('close', '编辑商品');
            },
            goodseditsubmitForm () {
                if(!this.params.title){
                    $.messager.alert('提示','商品标题为空','warning');
                    return;
                }
                if(!this.params.image){
                    $.messager.alert('提示','商品主图为空','warning');
                    return;
                }
                if(!this.dispatch_type){
                    $.messager.alert('提示','配送方式未选','warning');
                    return;
                }
                this.params.dispatch_type = this.dispatch_type.join(',');
                let dispatch_ids = [];
                if(this.dispatch_type.indexOf('express')>-1 && $('#goodsExpressVal').val()) {
                    dispatch_ids.push($('#goodsExpressVal').val());
                }
                if(this.dispatch_type.indexOf('store')>-1 && $('#goodsStoreVal').val()) {
                    dispatch_ids.push($('#goodsStoreVal').val());
                }
                if(this.dispatch_type.indexOf('selfetch')>-1 && $('#goodsSelfetchVal').val()) {
                    dispatch_ids.push($('#goodsSelfetchVal').val());
                }
                if(this.dispatch_type.indexOf('autosend')>-1 && $('#goodsAutosendVal').val()) {
                    dispatch_ids.push($('#goodsAutosendVal').val());
                }
                this.params.dispatch_ids = dispatch_ids.join(',');
                let itemCat = $('#<?php echo $uniqid;?> .item-cat').combotree('getValues');
                this.params.category_ids = itemCat.join(',');
                this.params.images = this.images_arr.join(',');
                this.params.service_ids = this.service_ids.join(',');
                this.params.params = JSON.stringify(this.parameters);
                this.params.content= goodsEditorUm.getContent();
                $.messager.progress();
                let act = this.params.id>0 ? 'edit' : 'add';
                $.post('/admin/goods/'+act, {params: this.params, skuList: this.skuList, skuPrice: this.skuPrice}, (data)=>{
                    $.messager.progress('close');
                    if(parseInt(data.ret)===0){
                        $.messager.show({
                            title:'提示',
                            msg:data.msg,
                            timeout:3000,
                            showType:'slide'
                        });
                        if (typeof(goodsReload)=='function'){
                            goodsReload();
                        }
                        $('#rightTabs').tabs('close', '编辑商品');
                    }else{
                        $.messager.alert('提示',data.msg,'warning');
                    }
                },'json');
            },
        }
    });
    if (typeof(goodsEditorUm) != 'undefined') {
        goodsEditorUm.destroy();
    }
    var goodsEditorUm = UE.getEditor('goodsEditor', {initialFrameHeight: 400, autoHeightEnabled: false});
    $('#goodsedit').tabs({
        onSelect(title, index){
            goodseditVm.step = index;
        }
    });
</script>

<style>
    .edui-editor {
        line-height: 20px;
    }
    .pointer{cursor:pointer}
    .goods-type {
        width: 162px;
        height: 58px;
        border-radius: 4px;
        position: relative;
        margin-right: 20px;
    }
    .goods-type-selected {
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 50%;
        background: #7438D5;
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        display: none;
        position: absolute;
        top: -8px;
        right: -8px;
    }
    .seleted{
        border: #ff6600 2px solid;
    }
</style>